<template>
  <div class="container">
    <h1>测试仪表盘</h1>
    <div style="width: 500px; height: 500px">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <linearGradient id="color">
            <stop offset="0%" stop-color="#229453" />
            <stop offset="50%" stop-color="#66c18c" />
            <stop offset="100%" stop-color="#b9dec9" />
          </linearGradient>
        </defs>
        <circle
          cx="160"
          cy="160"
          r="140"
          stroke="#999999"
          stroke-width="20"
          fill="none"
          stroke-dasharray="659,300"
          stroke-linecap="round"
          transform="rotate(135, 160, 160)"
        ></circle>
        <circle
          cx="160"
          cy="160"
          r="140"
          stroke="white"
          stroke-width="10"
          fill="none"
          stroke-dasharray="659,300"
          stroke-linecap="round"
          transform="rotate(135, 160, 160)"
        ></circle>
        <circle
          id="circle"
          cx="160"
          cy="160"
          r="140"
          stroke="url(#color)"
          stroke-width="10"
          fill="none"
          style="stroke-dasharray: 0, 900; transition: stroke-dasharray 2s"
          stroke-linecap="round"
          transform="rotate(135, 160, 160)"
        ></circle>
        <text
          x="50%"
          y="50%"
          style="
            font-weight: 600;
            font-size: 22px;
            text-anchor: middle;
            dominant-baseline: middle;
          "
        >
          500
        </text>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "vedio",
  data() {
    return {};
  },
  mounted() {
    const circle = document.getElementById("circle");
    var x = 1;
    setTimeout(() => {
      x += 1;
      console.log(12212);
      console.log(circle);
      circle.style.strokeDasharray = `500,600`;
    }, 200);
  },
  methods: {},
};
</script>

<style></style>
